<template>
  <div class="dashboard-container">
    <section class="chart-container">
      <el-row>
        <el-col :span="12">
          <div id="chartPie" style="width:100%; height:400px;"></div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'demo01',
    data() {
      return {
        chartPie: null,
        chart: null
      }
    },
    methods: {
      drawPieChart() {
        let mytextStyle = {
          color: "#333",                           //文字颜色
          fontStyle: "normal",                     //italic斜体  oblique倾斜
          fontWeight: "normal",                    //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
          fontFamily: "sans-serif",                //字体系列
          fontSize: 18,                              //字体大小
        };
        let mylabel = {
          show: true,                  //是否显示标签。
          position: "right",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
          offset: [30, 40],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
          formatter: '{b} : {c} ({d}%)',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'));
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',
            subtext: '纯属虚构',
            x: 'center',
            textStyle: mytextStyle,                     //标题样式
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
            left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
            top:"bottom",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
            orient:"horizontal",                        //图例排列方向
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              roseType: 'area',
              radius: [15, 100],
              center: ['50%', '50%'],
              data: [
                {value: 320, name: 'Industries'},
                {value: 240, name: 'Technology'},
                {value: 149, name: 'Forex'},
                {value: 100, name: 'Gold'},
                {value: 59, name: 'Forecasts'}
              ],
              label: {                      //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
                normal: mylabel,
                emphasis: mylabel
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    components: {
      echarts
    }
  }
</script>

<style lang="scss" scoped>
</style>
